import React, { useState } from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/CouponInfo.scoped.css'

const Component = () =>
{
  //接受传递过来的优惠券外键id
  let cid = React.params('cid') ?? 0
  let busid = React.business.id ?? 0  
  let [check,SetCheck] = useState(false);
  let [businessCoupon,SetBusinessCoupon] = useState([]);
  let [couponInfo,SetCouponInfo] = useState({
    rate:1
  });


  React.useEffect(()=>{
    CouponInfoList()
  },[])
  const CouponInfoList = async ()=>{
    var result = await React.request.post('/coupon/couponInfo',{cid,busid})
    if(result.code == 0){
      React.toast(result.msg,'back','fail');
      return false
    }
    // console.log(result.data.check);
    
    SetBusinessCoupon(result.data.businessCoupon)
    SetCouponInfo(result.data.couponInfo)     
    SetCheck(result.data.check)  

  }
  // 点击领取
  const apply = async ()=>{
    if(busid==0){
      React.toast('请先登录!','/business/login','fail');
      return false
    }
    var result = await React.request.post('/coupon/apply',{cid,busid})
    if(result.code == 0){
      React.toast(result.msg,'back','fail');
      return false
    }
    React.toast(result.msg,null,'success');
    React.navigate(0)
    return false
  }
  //购买这优惠券的用户
  const SwiperView = ()=>{
     if(businessCoupon.length<=0){
      return (<></>)
     }
     return (
        <React.UI.Swiper
        autoplay={true}
        autoplayInterval={3000}
        loop={true}
        indicator={() => false}
        direction='vertical' 
        style={{ '--height': '40px', 'border':'0px' }}
      >
        {
          businessCoupon.map((item,index)=>{
            return(
              <React.UI.Swiper.Item key={index}>
                  <React.UI.NoticeBar style={{'border':'0px'}} content={`用户：${item.business.nickname} 在 ${item.createtime_text} 领取了优惠券`} color='info' />
              </React.UI.Swiper.Item>
            )
          })
        }
      </React.UI.Swiper>
     )
  }
  let couponStatus = null
  if(busid==0){
    couponStatus = <React.UI.Button color='primary' fill='solid' size='small'>立即领取</React.UI.Button>
  }
  else{  
    if(check){
      couponStatus = <React.UI.Button color='success' disabled={true} fill='solid' size='small' >已领取</React.UI.Button>
    }else{
      couponStatus = <React.UI.Button color='primary' fill='solid' size='small' onClick={apply}>立即领取</React.UI.Button>
    }
  }
  return (
    <>
      <React.UI.AutoCenter>
        <React.UI.Image src={couponInfo.thumb_text} width={'100%'} fit='fill' />
      </React.UI.AutoCenter>

      {/* 领取列表 */}
      <SwiperView />

      {/* 优惠券 */}
      <div className='coupon_detail'>
        <div className='coupon_info'>
          <div className="left">
              <div className="left_top">
                  <div><span>{couponInfo.rate*100}</span>折</div>
                  <div className="top_info">
                      <div>优惠券</div>
                      <div>COUPON</div>
                  </div>
              </div>
          </div>
          <div className="receive">
          {couponStatus}      
          </div>
        </div>
        <div className="coupon_prompt">
          <div className="prompt_title">温馨提示：</div>
          <div>
              <span>•</span>
              领取后 {couponInfo.createtime_text} 至 {couponInfo.endtime_text} 有效
          </div>
          <div><span>•</span>仅限量{couponInfo.total}张，赶快领取！</div>
        </div>
      </div>

      <Menu />
    </>
  )
}

export default Component